Hexo 備忘錄

評論

這篇文章記錄自己使用 hexo 經驗備忘錄，內容適合第一次接觸 hexo 寫文章網友們做為參考。如果有發現特別補充的事，歡迎在下面 DISQUS 留言討論。

hexo 怎麼唸

依照 hexo 作者 zespia 的文章 Hexo 颯爽登場！ 提到：

Hexo 的發音很類似於 へそ（肚臍） － zespia

所以發音是 へ(he)そ(so)，中文應該就是「黑索」

完整發佈

可以在 package.josn 新增

"scripts": {
    "deploy": "hexo clean & hexo g & hexo d"
}

然後透過

$ npm run deploy

來進行比較完整的發佈動作

閱讀更多

文章內容可以透過這樣寫法，讓列表只顯示文章的部分內容

我是列表才會顯示的部分

<!-- more -->

我是繼續閱讀才會顯的部分

插入圖片

需要先將 _config.yml 中的 post_asset_folder 設定為 true，詳細參考 Hexo 資產資料夾

{% asset_img demo.jpg [我是圖片說明] %}

如此一來會輸出 HTML 為

<img src="Markdown檔案名稱/demo.jpg" alt="我是圖片說明" />

如果想要使用比較符合 Markdown 的寫法，可以安裝 hexo-asset-image 插件，就可以改成下面寫法

![我是圖片說明](Markdown檔案名稱/demo.jpg)

建議讓 資源資料夾 和 檔案名稱 以及文章標題 title: 都命名相同的名稱，資料夾範例結構如下：

  • 《source》
    • 《_posts》
      • 《Hexo 使用筆記》
      • Hexo 使用筆記.md

而 Hexo 使用筆記.md 的 meta 範例內容為：

---
title: Hexo 使用筆記
date: 1991-01-01
tags:
---

插入 Youtebe 影片

只要給 youtebe 的 videoId 即可

{% youtube X85DcsKHaUo %}

如果需要指定播放時間範圍，可以這樣寫：

{% youtube wlt3-yM-weE?start=53&end=59 %}

當然也支援內嵌作法

<iframe width="560" height="315" src="https://www.youtube.com/embed/X85DcsKHaUo" frameborder="0" allowfullscreen></iframe>

不過如想要統一使用 Markdown 寫作風格，有網友認為不要使用 iFrame 的作法，改用：

[![IMAGE ALT TEXT](http://img.youtube.com/vi/YOUTUBE_VIDEO_ID_HERE/0.jpg)](http://www.youtube.com/watch?v=YOUTUBE_VIDEO_ID_HERE "Video Title")

詳細可以參考此篇文 Is it possible to embed Youtube/Vimeo videos in Markdown using a C# Markdown library

插入 UML 圖型

先安裝插件 hexo-tag-plantuml，之後可以使用語法

1
2
3
{% plantuml %}
    Bob->Alice : hello
{% endplantuml %}

來畫出 UML 圖型

語法的使用方式參考 plantuml

插入 mermaid 流程圖

先安裝插件 npm install hexo-filter-mermaid-diagrams 後，在設定檔 _config.yml 追加

1
2
3
4
5
6
# mermaid chart
mermaid: ## mermaid url https://github.com/knsv/mermaid
enable: true
version: "7.1.2" # default v7.1.2
options:  # find more api options from https://github.com/knsv/mermaid/blob/master/src/mermaidAPI.js
    #startOnload: true  // default true

接下來在視圖檔，追加相關 scripts (這邊以 swig 的樣版為例)，以筆者佈景主題為例，就會放在 themes/minos/layout/_partial/after-footer.swig 的地方

1
2
3
4
5
6
7
8
{% if (theme.mermaid.enable)  %}
<script src='https://unpkg.com/mermaid@{{ theme.mermaid.version }}/dist/mermaid.min.js'></script>
<script>
    if (window.mermaid) {
      mermaid.initialize({theme: 'forest'});
    }
</script>
{% endif %}

接下來只要在文章使用如下：

1
2
3
4
5
<pre class="mermaid">graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;</pre>

就會出現下列的圖案

graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;

編碼支援度

  • _drafts 或 _posts 底下可以新增資料夾，多層資料夾結構，不會影響其編譯。例如文檔路徑假設為 _drafts/將心比將/序.md 也能正常被編譯
  • 文章的檔名可以直接使用中文命名，甚至有可空格也沒關係，例如： Hexo 備忘錄.md，建議文章的 title 屬性設定和檔名一致。

目錄

Go Top